<template>
  <div>
    <el-dialog
      ref="refDlg"
      title="新增"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600"
      @close="handleBack"
    >
      <div>
        <el-form ref="ruleForm" :model="formData" size="mini" :rules="rules" label-width="120px">
          <el-row class="form_item_height">
            <el-col :span="12">
              <el-form-item label="所属空间:" prop="configSpace">
                <span v-if="flag === 'detail'">{{ formData.spaceName }}</span>
                <input-with-dialog
                  v-else
                  v-model="formData.configSpace"
                  :props="{label:'spaceName',value:'id'}"
                  :config="spaceConfig"
                  @change="spaceChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="风格描述:" size="mini" prop="styleDesc">
                <el-input v-model="formData.styleDesc" placeholder="请输入风格描述" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="户型:" prop="houseType">
                <span v-if="flag === 'detail'">{{ formaterData(houseTypeList, formData.houseType) }}</span>
                <el-select v-else v-model="formData.houseType" placeholder="请选择户型" style="width:100%" @change="changeShop">
                  <el-option v-for="item in houseTypeList" :key="item.dictCode" :label="item.dictName" :value="item.dictCode" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="户型定位:" prop="houseTypePosition">
                <span v-if="flag === 'detail'">{{ formaterData(housePositionList, formData.houseTypePosition) }}</span>
                <el-select v-else v-model="formData.houseTypePosition" placeholder="请选择户型定位" style="width:100%" @change="changeShop">
                  <el-option v-for="item in housePositionList" :key="item.dictCode" :label="item.dictName" :value="item.dictCode" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="大致面积:" prop="adviceSampleArea">
                <span v-if="flag === 'detail'">{{ formData.adviceSampleArea }}</span>
                <el-input v-else v-model="formData.adviceSampleArea" placeholder="请输入大致面积" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="空间说明:" prop="spaceDesc">
                <el-input v-model="formData.spaceDesc" placeholder="请输入空间说明" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属区域:" size="mini" prop="areaName">
                <span>样板间</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer">
        <el-button size="mini" @click="handleBack">取消</el-button>
        <el-button type="primary" size="mini" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { submitEditFormData } from '@/api/marketConstruction'
import { getDictByPatchType } from '@/api/dataDict'
export default {
  name: 'AddPlan',
  // components: { fileUploader },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      houseTypeList: [],
      housePositionList: [],
      sampleSpaceList: [],
      cupboardSeries: [],
      style: [],
      formData: {
        areaCode: 'Q005',
        configSpace: [],
        // style: [],
        enable: 1
      },
      rules: {
        configSpace: [{ required: true, message: '请选择所属空间' }],
        styleDesc: [{ required: true, message: '请输入风格描述' }]
      },
      cupboardSeriesConfig: {
        title: '橱柜系列',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configSeries/page`,
        setting: [
          {
            prop: 'seriesCode',
            title: '编码'
          },
          {
            prop: 'seriesName',
            title: '名称'
          }
        ],
        filtersRaw: [{ 'id': 'isPartakeSpread', 'property': 'isPartakeSpread', 'operator': '=', 'value': '1' },
          { 'id': 'typeCode', 'property': 'typeCode', 'operator': 'in', 'value': '[6, 8]' }]
      },
      styleConfig: {
        title: '所属专区',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configStyle/page`,
        setting: [
          {
            prop: 'styleCode',
            title: '专区编码',
            minWidth: '100'
          },
          {
            prop: 'styleName',
            title: '专区名称',
            minWidth: '100'
          }
        ],
        filtersRaw: [{ 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': '1' }]
      },
      spaceConfig: {
        title: '所属空间',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configSpace/page`,
        setting: [
          {
            prop: 'spaceCode',
            title: '编码'
          },
          {
            prop: 'spaceName',
            title: '名称'
          }
        ],
        filtersRaw: [{ 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': '1' },
          { 'id': 'areaCode', 'property': 'areaCode', 'operator': '=', 'value': 'Q005' }]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  async created() {
    await this.getDictByPatchTypeAll(['HOUSE_TYPE', 'HOUSE_TYPE_POSITION', 'SAMPLE_FUNCTION_SPACE']).then(res => {
      this.houseTypeList = res.HOUSE_TYPE
      this.housePositionList = res.HOUSE_TYPE_POSITION
      this.sampleSpaceList = res.SAMPLE_FUNCTION_SPACE
    })
  },
  methods: {
    async getDictByPatchTypeAll(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 选择空间
    spaceChange(row) {
      if (row && row.length) {
        this.formData.configSpaceId = row[0].id
        this.formData.areaName = row[0].areaName
      }
    },
    styleChange(row) {
      this.formData.configStyleId = row[0].id
      this.formData.styleCode = row[0].styleCode
      this.formData.styleName = row[0].styleName
    },
    // 取消
    handleBack() {
      this.dialogShow = false
      this.clearForm()
    },
    // 清空表单
    clearForm(done) {
      this.formData = {}
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },
    // 提交
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          submitEditFormData(this.formData).then(res => {
            if (res.success) {
              this.$message.success('操作成功')
              this.dialogShow = false
              this.clearForm()
              // const isNew = !this.formData.id
              this.$emit('success', res.data)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
